<template>
	<view class="pro-body">
		<view class="fixed-header">
			<view class="uni-form-item uni-column">
				<view class="search-box">
					<input class="uni-input" confirm-type="search" placeholder="请输入工序计划单号"  placeholder-class="placeholder-style"  v-model="billNo"
						@confirm="onSearch" />
					<view class="search-icon" @click="onSearch">
						  <uni-icons type="search" size="40"></uni-icons>
					</view>
				</view>
				<view class="scan-icon" @click="scanOrderDe()">
					<image src="/static/img/scan.png" style="width: 70px; height: 70px; margin-left: 10px;"
						class="search-icon-image"></image>
				</view>
			</view>
		</view>

		
		<view class="uni-form-list">
			<scroll-view scroll-y="true" class="scroll" @scrolltolower="handleScrolltolower" refresher-enabled
				@refresherrefresh="handleRefresherrefresh" :refresher-triggered="refresherTriggered">
				<template v-if="motMap.receiveList && motMap.receiveList.length > 0">
					<uni-swipe-action>
						<uni-swipe-action-item v-for="item in motMap.receiveList">
							<view class="panel" @click="openDetail(item.billNo)"
								:style="{ backgroundColor: item.boxColor }">
								<view class="panel_title" :class="{error: item.error}">
									<view class="panel_title_left">{{ item.billNo }}</view>
									<!-- <view class="panel_title_right">{{ item.orgName }}</view> -->
								</view>
								<view class="panel_content">
									<view class="flex-list">
										
										<view class="flex-row" v-if="item.moBillNo">
											 <view class="flex-title">生产订单号：</view>
										     <view class="flex-content">{{ item.moBillNo }}</view>
										</view>
										
										<view class="flex-row" v-if="item.materialName">
											 <view class="flex-title">物料名称：</view>
										     <view class="flex-content">{{ item.materialName }}</view>
										</view>
										
										<view class="flex-row" v-if="item.moldStatus">
											 <view class="flex-title">是否领用模具：</view>
										  <view class="flex-content">
										  <uni-tag :text="statusText(item)" :type="statusType(item)">						  
										  	</uni-tag>
										  </view>
										</view>
										
										
										<view class="flex-row" v-if="item.qty">
											 <view class="flex-title">数量：</view>
										     <view class="flex-content">{{ item.qty }}</view>
										</view>
										
										
										<view class="flex-row" v-if="item.date">
											 <view class="flex-title">日期：</view>
										    <view class="flex-content">
										    	<uni-dateformat :date="item.date" format="yyyy年MM月dd日">
										    	</uni-dateformat>
										    </view>
										</view>
										
									</view>

								</view>
							</view>
						</uni-swipe-action-item>
						<!-- 加载 -->
						<uni-load-more
							:status="motMap.pageConfig.bottomLoading ? 'loading' : motMap.pageConfig.bottomEnd ? 'noMore' : 'more'">
						</uni-load-more>
					</uni-swipe-action>
				</template>
				<!-- <uni-empty-info v-else label="暂无任务信息"></uni-empty-info> -->
			</scroll-view>
			<!-- 扫描工序计划 -->
			<task-order ref="taskOrderRef" @success="taskScanningScuess"></task-order>
		</view>

	</view>

</template>

<script>
	import {getProPlanDetail,
		getProplanListMoldStatus
	} from '@/utils/api.js';
	import TaskOrder from '../../components/popup/task-order.vue'

	export default {
		
		components: {
			TaskOrder
		},
		data() {
			return {
				motMap: {
					receiveList: [],
					pageConfig: {
						pageIndex: 0,
						pageSize: 20,
						bottomEnd: false,
						bottomLoading: true
					}
				},
				header:{},
				detail:[],
				refresherTriggered: false,
				_refresherTriggered: false,
				billNo: '', // 订单搜索框的值 

			};
		},
		methods: {
			statusText(item) {
			  if (item.moldStatus === true) return '已领';
			  if (item.moldStatus === false) return '未领';
					
			  return '';
			},
			statusType(item) {
			   
			    if (item.moldStatus === 1) return 'warning'
			    if (item.moldStatus === 2) return 'primary'
			    return 'success'
			  },
			handleScanSuccess(scanVal) {
				this.billNo = scanVal
			
				this.taskScanningSucess()
			},
			/**
			 * 扫码成功跳转到详页
			 * @param {Object} e
			 */
			async taskScanningScuess(e) {
				getProPlanDetail({billNo :e }).then(result => {
				if (result.statusCode == 200){
					this.openDetail(e)
					} 
				})
				// this.openDetail(params)
			},
			//扫码
			scanOrderDe() {
				this.$refs.taskOrderRef.open()
			},



			/**
			 * 跳转到补料单详情
			 */
			openDetail(billNo) {

				uni.navigateTo({
					url: '/pages/mold/moldReturnDetail?billNo=' + billNo
				})
			},
			


			/**
		  * 订单号日期搜索
			 */
		 onSearch() {
				this.initData({
					billNo: this.billNo,

				});
			},
			onChongzhi() {
				this.billNo = '';
			},

			/**
			 * 重置页数
			 */
			reset() {
				this.motMap.pageConfig.pageIndex = 0
			},


			/** 上滑加载 */
			handleScrolltolower() {
				if (this.motMap.pageConfig.bottomEnd) return
				this.motMap.pageConfig.pageIndex++
				this.initData()
			},
			/**
			 * 下拉刷新数据
			 */
			handleRefresherrefresh() {
				if (this._refresherTriggered) {
					return;
				}
				// 界面下拉触发，triggered可能不是true，要设为true
				if (!this.refresherTriggered) {
					this.refresherTriggered = true;
				}
				this.reset();
				this._refresherTriggered = true;
				this.motMap.pageConfig.bottomEnd = false;

				// 调用 initData 方法并确保在完成后重置 refresherTriggered 状态
				this.initData().then(() => {
					this.refresherTriggered = false;
					this._refresherTriggered = false;
				}).catch(error => {
					console.error("Error during initData:", error);
					this.refresherTriggered = false;
					this._refresherTriggered = false;
				});
			},
			initData({
				startDate = '',
				endDate = '',
				billNo = ''
			} = {}) {
				return new Promise((resolve, reject) => {
					getProplanListMoldStatus({
						pageSize: this.motMap.pageConfig.pageSize,
						pageIndex: this.motMap.pageConfig.pageIndex,
						billNo: this.billNo || ""
					}).then(res => {
						if (res.data.status !== 200) {

							return;
						}
						if (this.motMap.pageConfig.pageIndex === 0) this.motMap.receiveList = [];
						
						this.motMap.receiveList = this.motMap.receiveList.concat(res.data.data.dataList ??
							[]);
						if (res.data.status === 200 && this.motMap.pageConfig.pageSize > res.data.data
							.dataList.length) {
							this.motMap.pageConfig.bottomEnd = true;
						}
						this.motMap.pageConfig.bottomLoading = false;
						this.loading = false;
						this.refresherTriggered = false;
						this._refresherTriggered = false;
						this.incompleteCount = res.data.data.completeCount;
						this.excuteCount = res.data.data.excuteCount;
						this.completeCount = res.data.data.completeCount;

						resolve();
					}).catch(err => {
						
						reject(err);
					});
				});
			},
			onSearch() {
				this.motMap.pageConfig.pageIndex = 0; // 重置分页索引
				this.initData({
					billNo: this.billNo
				});
			},


		},
		onLoad() {
			// if (typeof window.entryUrl === 'undefined' || window.entryUrl === ""){
			// 	window.entryUrl = location.href.split('#')[0]
			// }
			// let url = /Android/i.test(navigator.userAgent)
			//   ? window.location.href
			//   : window.entryUrl
		},
		mounted() {
			let self = this;
			this.initData()
		
		},
		//移除监听时间
		onUnload() {
			uni.$off('update')
		}
	};
</script>


<style lang="scss" scoped>
	@import "../../static/css/common";

	.pro-body {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;

	}

	.fixed-header {
		position: fixed;
		top: 1px;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #ffffff;
		height: 80px;
		
	}
	.search-box {
		display: flex;
		width: 74%;
		align-items: center;
		border: 1px solid #000000;
		margin-left: 10px;
		// margin-top: 5px;
	    height: 55px;
	}
        .search-box input {
            flex: 1;
            border: none;
            outline: none;
            padding: 0 12px;
            font-size: 40px; /* 增大字体 */
            height: 100%;
            color: #333;
        }
        
    
	.uni-input {
		flex: 1;
		padding: 10px;
		border: none;
		outline: none;
	
	}
	
	.search-icon {
		cursor: pointer;
		z-index: 999;
	}
	
/* 新增placeholder-class的样式 */
.placeholder-style {
    font-size: 20px !important;
    color: #999 !important;
}

/* 面板样式 - 消除所有空隙 */
/* 优化后的面板样式 - 确保分隔线生效且零空隙 */
.panel {
  height: 100%;
  padding: 0; /* 清除内间距 */
  margin: 0; /* 清除外间距 */
  border-radius: 0;
  background-color: #ffffff;
  position: relative; /* 为伪元素分隔线定位准备 */
  box-sizing: border-box; /* 防止边框影响布局 */
}

/* 使用伪元素实现加粗分隔线（更可控） */
.panel::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px; /* 精确控制位置 */
  width: 100%;
  height: 4px; /* 分隔线粗细 */
  background-color: #9c9c9c; /* 分隔线颜色 */
}

  .panel_title {
    display: flex;
    justify-content: space-between;
    font-size: 90px; /* 增大标题字号 */
    font-weight: bold;
    margin-bottom: 2px; /* 减少标题与内容的间距 */
  }
	.panel_title_left {
	  font-size: 30px !important; /* 增大字体并添加!important确保覆盖 */
	  font-weight: bold;
	  color: #333;
	  flex: 1;
	}
	/* 新增：统一调整内容字体 */
	.flex-list {
	    display: flex;
	    flex-direction: column;
	  }
	  .flex-row {
	    display: flex;
	    flex-direction: row;
	    margin-bottom: 2px; /* 行间距，根据需求调整 */
	    align-items: flex-start; /* 顶部对齐 */
	  }
	/* 新增：统一调整内容字体 */
	.flex-title{
		white-space: nowrap;
		font-size: 20px !important; /* 统一设置标签和内容字体 */
		line-height: 1.2; /* 缩小行高 */
		color: #000000 !important; 
	}
	.flex-content {
		word-break: break-all;
	  font-size: 20px !important; /* 统一设置标签和内容字体 */
	  line-height: 1.2; /* 缩小行高 */
	  color: #000000 !important; 
	}
	.uni-form-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		width: 100%;
	}


	.scroll-container {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* 支持 iOS 上的平滑滚动 */

	}

	.scroll {
		padding-top: 80px;
		/* 使用 padding-top 替代 margin-top */
		// margin-bottom: px;
		/* 根据底部的高度调整 */
		height: calc(116vh - 160px - 1px);
		/* 根据需要调整高度 */
		position: relative;
		/* 避免使用 fixed */
		overflow-y: auto;
		/* 确保内容可以垂直滚动 */
	}

</style>
